<template>
	<view class="page">
		<view class="audio" v-if="currentSong!=null">
			<view class="audio-left" @tap="send">
				<view class="audio-left-bg">
					<image :src="currentSong.al.picUrl" :class="!audios.playing ? 'play ' : 'stop'"
						v-if="currentSong.al"></image>
					<u--image :src="currentSong.album.picUrl" width="106rpx" height="100rpx" v-else>
					</u--image>
				</view>
			</view>
			<view class="audio-center">
				<view class="" v-if="currentSong.ar">
					<text>{{currentSong.name}}</text>
					<text class="audio-center-name">-{{currentSong.ar[0].name}}</text>
				</view>
				<view class="" v-else>
					<!-- <text>{{currentSong.name}}</text> -->
					<u--text :text="currentSong.name" lines="1"></u--text>
				</view>
			</view>
			<view class="audio-right">
				<view class="audio-right-img">
					<image @click="onPlay" v-if="!audios.playing" src="@/static/icon/stops.png" mode="">
					</image>
					<image @click="onPause" v-else src="@/static/icon/play.png" mode=""></image>
					<image src="@/static/icon/playlist.png" @click="show = true"></image>
				</view>
				<view class="contents-popup">
					<u-popup :show="show" @close="close" :customStyle="popupStyle" round="20">
						<CurrentPlay></CurrentPlay>
					</u-popup>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import CurrentPlay from '@/components/CurrentPlay.vue'
	export default {
		name: "palys",
		components: {
			CurrentPlay
		},
		data() {
			return {
				flag: true,
				sliderTime: 0, // 进度条
				show: false,
				innerAudio: getApp().globalData.audio,
				popupStyle: {
					width: '90%',
					margin: '0 auto',
					background: '#2f3164',
				},
			}
		},
		methods: {
			// 当播放结束
			audioEnd() {
				this.$store.dispatch("increasePlayIndex");
			},
			//当音频播放
			onPlay() {
				this.$store.dispatch("playAudio", true)
				getApp().globalData.audio.pause()
			},
			//当音频暂停
			onPause() {
				this.$store.dispatch("playAudio", false);
				getApp().globalData.audio.play()

			},
			send() {
				uni.navigateTo({
					url: '/view/Playmusic/Playmusic'
				})
			},
			//关闭Popup 弹出层
			close() {
				this.show = false
			},


		},
		computed: {
			// 当前歌曲内容
			currentSong() {
				return this.$store.getters.getCurrentSong;
			},
			// 播放标签状态
			audios() {
				return this.$store.state.audio;
			},
			// 当前播放歌曲URL
			playurl() {
				return this.$store.getters.getPlaySong;
			},


		},
		watch: {
			playurl: {
				deep: true,
				handler(newVal, oldVal) {
					if (newVal && newVal !== this.innerAudio.src) {
						this.innerAudio.src = newVal

						this.innerAudio.play(() => {

						})

						this.innerAudio.onEnded(() => {
							if (this.innerAudio.onWaiting) {
								this.audioEnd()
							} else {
								console.log(123);
							}


						})
					}
				}
			},
		}

	}
</script>

<style lang="scss" scoped>
	.page {
		padding-bottom: calc(var(--window-bottom));
		position: relative;
	}

	.audio {
		display: flex;
		justify-content: space-between;
		width: 100%;
		background-color: #fff;
		align-items: center;
		position: absolute;
		bottom: 0rpx;

		//右边两个按钮
		&-right {
			display: flex;

			&-img {
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 35px;
					height: 35px;
					padding: 0rpx 15rpx;
				}
			}
		}

		&-center {
			display: flex;
			margin-left: 15rpx;
			font-size: .8rem;
			flex: 1;

			&-name {
				font-size: 25rpx;
				color: #999;
			}
		}

		&-left {
			display: flex;
			align-items: center;

			&-bg {
				background: url(../static/icon/disc.png) no-repeat;
				background-size: 50px;
				width: 100rpx;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: -12rpx;
				// justify-content: center;
				position: relative;

				image {
					animation: play 10s linear infinite;
					width: 60rpx;
					height: 60rpx;
					border-radius: 100%;
					position: absolute;
					top: 20rpx;
					left: 20rpx;


					@keyframes play {
						0% {
							transform: rotate(0deg);
						}

						100% {
							transform: rotate(360deg);
						}
					}

					.play {
						animation-play-state: running;
					}

					.stop {
						-webkit-animation-play-state: paused !important;
						/* Safari 和 Chrome */
					}


				}

			}
		}
	}

	.play {
		animation-play-state: running;
	}

	.stop {
		-webkit-animation-play-state: paused !important;
		/* Safari 和 Chrome */
	}
</style>
